<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

//搜索的用户ID
const userId = ref("");
//搜索的藏品名称
const name = ref("");
//定义藏表格的引用
const registrationRef = ref();
//选择的当前挂单
const currentRegistration = ref();
//存储
const registration=ref({
  records:[]
});
const headers = {
  Authorization: localStorage.getItem("auth")
}

//藏品相关数据加载中
const regPageLoading = ref(true);
//当前页码
const regPageIndex = ref(1);

const getregPage = () => {
  regPageLoading.value = true;
  axios.post("/api/registration", {
    pageIndex: regPageIndex.value,
    pageSize: 8,
    name: name.value,
    userId: userId.value
  }, {
    headers
  }).then(response => {
    console.log("获取成功");
    registration.value = response.data.value;  //将从接口获取到的数据，赋值给regPage对象
    regPageLoading.value = false;
  }).catch(error => {
    console.log("获取失败", error.response);
    regPageLoading.value = false;
  })
}


getregPage();

//表示单击行
const handleRowClick = row => {
  if(row!=undefined){
    registrationRef.value.data.forEach(r => {
      registrationRef.value.toggleRowSelection(r, r.id == row.id);
    })
    currentRegistration.value = row;
    console.log("点击一行了",row);
  }
  }

//选择数据key集合
const multipleSelection = ref([]);
const handleSelectionChange = val => {
  multipleSelection.value = val;
  if (multipleSelection.value.length == 1) {
    currentRegistration.value = multipleSelection.value[0];
  } else {
    currentRegistration.value = {};
  }
}
/*//控制删除挂单对话框是否显示
const Visible = ref(false);*/



//删除按钮加载中
const btnRemoveLoading = ref(false);

//删除挂单
const removereg = () => {
  multipleSelection.value.forEach(registration => {
    btnRemoveLoading.value = true;
    axios.post("/api/registration/remove?id="+registration.id, {},{headers}).then(response => {
      console.log("删除成功");
      getregPage();
      btnRemoveLoading.value = false;
      ElMessage({
        message: "撤销成功",
        type: 'success',
      })
    }).catch(error => {
      console.log("删除失败", error.response);
      btnRemoveLoading.value = false;
      ElMessage({
        message: error.response.data.message,
        type: 'warning',
      })
    })
  })
}

</script>

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
    <el-breadcrumb-item>订单中心</el-breadcrumb-item>
    <el-breadcrumb-item>二级市场挂单</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="view">
    <div class="vHead">
      <div class="vHLeft">
        <el-input v-model="userId" placeholder="用户Id" style="width:160px" />&nbsp;&nbsp;
        <el-input v-model="name" placeholder="藏品名称" style="width:160px" />&nbsp;&nbsp;
        <el-button type="primary" @click="getregPage">搜索</el-button><el-divider border-style="double" />
      </div>
      <div>
        <el-popconfirm title="确认撤销吗？"
                       confirm-button-text="是"
                       cancel-button-text="否"
                       @confirm="removereg">
          <template #reference>
            <el-button type="warning" :disabled="multipleSelection.length == 0" :loading="btnRemoveLoading">撤销挂单</el-button>
          </template>
        </el-popconfirm>
      </div>
    </div>
    <div>
      <el-table :data="registration.records"
                v-loading="regPageLoading"
                row-key="id"
                ref="registrationRef"
                @current-change="handleRowClick"
                @selection-change="handleSelectionChange"
                stripe
                highlight-current-row
                empty-text="暂无数据"
                style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="userId" label="用户ID" />
        <el-table-column prop="name" label="藏品名称" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="createTime" label="挂单时间" />
<!--        <el-table-column prop="state" label="管理" />-->
      </el-table>
      <el-pagination background layout="prev, pager, next"
                     :default-page-size="registration.pageSize"
                     :total="registration.total"
                     v-model:current-page="regPageIndex"
                     @current-change="getregPage"
      />
    </div>
  </div>


</template>

<style scoped>

</style>